<template>
	<view class="page-container">
		<view class="p-3 pb-1 page-wrap">
			<view class="flex justify-between align-center p-2 mb-3 serach-bar" @click="showPicker = true">
				<view class="label">领料仓库</view>
				<view class="mr-2 ml-1 line"></view>
				<view class="f-1">{{ CurrentWareName }}</view>
				<u-icon color="#CECECE" size="16" name="arrow-right"></u-icon>
			</view>
			<view class=" order-list">
				<u-empty class="pt-5" v-if="!SaleSheetDetailList[0]" text="暂无数据" icon="" />
				<u-list v-else @scrolltolower="scrolltolower" height="960rpx">
					<u-list-item v-for="(item, idx) in SaleSheetDetailList" :key="idx">
						<view class="flex mb-3 p-2 item">
							<image class="mr-2 img" :src="'http://img.help10000.com' + item.Image" mode="scaleToFill">
							</image>
							<view class="flex justify-between direction-column f-1 info">
								<view class="flex align-start">
									<view class="f-1 mr-1">
										<view class="title">{{ item.ItemName }}</view>
										<view class="desc">{{ item.ItemStyle }}</view>
									</view>
									<u-icon @click="handleModalConfirm(item)" color="#929292" size="25"
										name="trash"></u-icon>
								</view>
								<view class="flex justify-between align-center">
									<u--text color="#e0584e" size="20rpx" bold mode="price" :text="item.Price"></u--text>
									<view class="qty">{{ item.Qty }} 库存</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<view class="fixed-height"></view>
		<view class="fixed-btn">
			<navigator class="f-1" :url="`/pages/sheet/sheetSelect?wId=${CurrentWareId}&rId=${currId}`">
				<u-button color="#007aff" shape="circle" text="添加领料"></u-button>
			</navigator>
		</view>
		<u-picker :show="showPicker" :defaultIndex="[currentWareIdx]" :columns="[WareList]" @cancel="showPicker = false" @confirm="handlePickerConfirm"
			keyName="WareName" title="请选择"></u-picker>
		<u-modal :show="showConfirm" @confirm="handleProdDel" @cancel="showConfirm = false" :showCancelButton="true"
			title="删除商品" content='确定删除该商品？'></u-modal>

		<u-safe-bottom></u-safe-bottom>

	</view>
</view></template>

<script>
import {
	sheetInit,
	sheetWareChange,
	sheetProdList,
	sheetProdDelete
} from "@/apis/workOrder.js";
import {
	parseTime,
	getTotalPageNum
} from "@/util";
export default {
	data() {
		return {
			showPicker: false,
			WareList: [],
			currentWareIdx: 0,
			SaleSheetDetailList: [],
			currId: '',
			CurrentWareId: '',
			CurrentWareName: '',
			showConfirm: false,
			currItem: null,
		};
	},
	onShow() {
		if (this.currId) this.fetchData()
	},
	onLoad(option) {
		uni.getStorageSync('accountInfo') || {}
		if (option.id) {
			this.currId = option.id
			console.log('option', option.id)
			this.fetchData()
		} else {
			this.$navigateBack(this.$router, 1)
		}
	},
	methods: {
		async handlePickerConfirm(e) {
			console.log('handlePickerConfirm', e)
			this.showPicker = false
			const idx = e.indexs[0]
			if(this.SaleSheetDetailList.length){
				const res = await sheetWareChange({
				WareId: this.WareList[idx].WareId,
				RepairId: this.currId
			})
			this.fetchData()
			}else{
				uni.setStorageSync('CurrentWareName', e.value[0].WareName);
				uni.setStorageSync('CurrentWareId', e.value[0].WareId);
				this.CurrentWareName = e.value[0].WareName
				this.CurrentWareId = e.value[0].WareId
				this.currentWareIdx = e.indexs[0]
			}
		},
		async fetchData() {
			const res = await sheetInit({
				RepairId: this.currId
			})
			if (res.MsgCode != 0) return
			this.CurrentWareId = uni.getStorageSync('CurrentWareId') || res.data.CurrentWareId
			this.CurrentWareName = uni.getStorageSync('CurrentWareName') || res.data.CurrentWareName
			this.WareList = res.data.WareList
			this.currentWareIdx = res.data.WareList.findIndex(o => o.WareId === this.CurrentWareId)
			console.log('========',this.currentWareIdx)
			this.SaleSheetDetailList = res.data.SaleSheetDetailList
		},
		handleModalConfirm(item) {
			this.currItem = item
			this.showConfirm = true
		},
		async handleProdDel() {
			const currItem = this.currItem
			if (!currItem) return;
			console.log('handleProdDel', currItem)
			const res = await sheetProdDelete({
				RepairId: this.currId,
				ItemId: currItem.ItemId
			})
			console.log('handleProdDel', res)

			if (res.MsgCode != 0) return
			this.showConfirm = false
			uni.showToast({
				title: '删除成功！',
				duration: 500,
				icon: 'success'
			});
			setTimeout(this.fetchData, 500)
		},
		formatImgUrl(arrStr) {
			try {
				const arr = JSON.parse(arrStr)
				return arr.map(item => {
					return 'http://img.help10000.com' + item
				})
			} catch (ex) {
				console.error("formatImgUrl", ex.message);
			}
		},
		scrolltolower() {
		},
	}
}
</script>

<style lang="scss">
.page-container {
	.page-wrap {
		.serach-bar {
			background-color: #fff;
			border-radius: $s-border-radius;
			color: #333;
			font-size: 28rpx;

			.line {
				height: 40rpx;
				width: 1px;
				border-right: 1px solid rgba(0, 0, 0, 0.1);
			}

			.label {
				color: #999;
			}

			::v-deep .uni-input-input:disabled {
				background-color: #fff;
				color: #333 !important;
			}
		}

		.order-list {
			.item {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;
				font-size: 26rpx;

				.img {
					width: 140rpx;
					height: 140rpx;
				}

				.desc {
					font-size: 20rpx;
					color: #777;
				}

				.qty {
					font-size: 20rpx;
				}

			}
		}
	}

	.fixed-height {
		height: 130rpx;
		width: 100%;
	}

	.fixed-btn {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background-color: #fff;

		::v-deep .u-button {
			width: calc(100% - 20rpx);
			margin: 0;
		}
	}
}</style>
